<template>
  <div class="activity-detail-wrapper">
    <div class="activity-banner-box">
      <img class="activity-img" src="../../images/banner-activity.jpg" />
    </div>
    <div class="activity-product-box knife_container">
        <div class="activity-product-head title">
          <img src="../../images/activity-title.png"/>
        </div>
        <div class="activity-product-body">
          <ActiveProduct :productList="activityList"></ActiveProduct>
        </div>
        <!-- 活动规格 -->
        <div class="activity-rules-wrapper">
          <h2 class="rules-title">活动声明</h2>
          <div class="rules-body">
            <div class="rules-body-item">
              <p> 1、本次活动为全平台用户可参与活动</p>
              <p> 2、本次活动商品皆为限时、限量抢购（过期无法参与）</p>
              <p> 3、本次活动只能通过刀具联盟商城参与</p>
            </div>
            <div class="rules-body-item">
              <p> 4、本次活动的商品不可使用平台优惠券</p>
              <p> 5、本次活动最终解释权归刀具联盟所有 </p>
            </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import {ActiveProduct} from '@/components/index'
import {getActivityList, getActivityId} from '@/service/get-data'
export default {
  components: {
    ActiveProduct
  },
  computed: {
  },
  data () {
    return {
      activityId: '',
      activityList: []
    }
  },
  methods: {
    async fetchActivityList () {
      let res = await getActivityList(this.activityId)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.activityList = res.data.data
      } else {
        this.$message.error({
          message: res.data.resultMsg
        })
      }
    },
    async fetchActivityId () {
      let res = await getActivityId()
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.activityId = res.data.data
        return true
      }
    }
  },
  mounted () {
    this.fetchActivityId().then((res, rej) => {
      this.fetchActivityList()
    })
  }
}
</script>

<style lang="scss" scoped>
  .activity-detail-wrapper{
    padding-bottom: 60px;
    background:#110d0c;
    background: -webkit-radial-gradient(50% 36%, circle closest-side, #282525, #110d0c);
    background: -o-radial-gradient(50% 36%, circle closest-side, #282525, #110d0c); /* Opera 11.6 - 12.0 */
    background: -moz-radial-gradient(50% 36%, circle closest-side, #282525, #110d0c); /* Firefox 3.6 - 15 */
    background: radial-gradient(50% 36%, circle closest-side, #282525, #110d0c); /* 标准的语法（必须放在最后） */
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr = #282525, endColorstr = #110d0c);
  }
  .activity-banner-box{
    position:relative;
    min-width: 1200px;
    max-width: 1920px;
    text-align: center;
    margin: 0 auto 76px;
    .activity-img{
      width:100%;
    }
  }
  .activity-product-box{
    // background: url("../../images/activity_bg.jpg") no-repeat;
      .title{
        font-size: 30px;
        color: #fefefe;
        line-height: 1.5;
        vertical-align: middle;
        text-align: center;
        margin-bottom: 76px;
      }
    }
    .activity-product-body{
      margin-bottom: 60px;
    }
    .activity-rules-wrapper{
      background-color: rgba(26, 22, 20, 0.8);
      border-radius: 2px;
      padding: 44px 105px;
      color: #f3e2a1;
      text-align: center;
      .rules-title{
        position: relative;
        display: inline-block;
        font-size: 20px;
        line-height: 14px;
        letter-spacing: 2px;
        &::before{
          position: absolute;
          content: '';
          width: 140px;
          height: 2px;
          background: #f3e2a1;
          left: -150px;
          top: 12px;
        }
        &::after{
          position: absolute;
          content: '';
          width: 140px;
          height: 2px;
          background: #f3e2a1;
          right: -150px;
          top: 12px;
        }
      }
      .rules-body{
        display: flex;
        justify-content: space-around;
        text-align: left;
        margin-top: 52px;
        .rules-body-item{
          line-height: 26px;
          font-size: 16px;
        }
      }
    }
    

</style>
